<template>
	<view>
		<goods-choose-list :priceType="1" :orderId="orderId" :details="details" height="100vh" @confirm="handleConfirm"></goods-choose-list>
		<!-- 确认支付方式 -->
		<u-popup v-model="payTypeShow" mode="center" border-radius="14" :closeable="true" width="600rpx" z-index="100">
			<view class="u-p-t-30 u-p-b-30 u-text-center"><text class="u-font-32">支付方式</text></view>
			<u-divider></u-divider>
			<u-cell-group>
				<u-cell-item title="微信支付" :arrow="false" @click="choosePayType(1)">
					<view slot="icon" class="u-flex" style="width: 80rpx;">
						<u-icon name="weixin-fill" size="60" color="#28a745"></u-icon>
					</view>
					<view slot="label">
						<view v-if="onlinePay"><text>支付至用户账户余额</text></view>
						<view v-else><text class="u-type-error">余额不足，请选择现金支付</text></view>
					</view>
					<view slot="right-icon">
						<view class="circle" :class="payType == 1?'on':''">
							<u-icon name="checkmark" size="20" color="#fff" v-if="payType == 1"></u-icon>
						</view>
					</view>
				</u-cell-item>
				<u-cell-item title="现金支付" :arrow="false" @click="choosePayType(2)">
					<view slot="icon" class="u-flex" style="width: 80rpx;">
						<u-icon name="rmb-circle-fill" size="60" color="#fd7e14"></u-icon>
					</view>
					<view slot="label">
						<view><text>与用户线下现金结算</text></view>
					</view>
					<view slot="right-icon">
						<view class="circle" :class="payType == 2?'on':''">
							<u-icon name="checkmark" size="20" color="#fff" v-if="payType == 2"></u-icon>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="u-p-30">
				<u-button type="primary" @click="recovery(payType)" :loading="loading">确认支付</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				loading: false,
				orderId: 0,
				details: [],
				payTypeShow: false,
				payType: 2, //1:微信小程序,2:线下支付
				onlinePay: false, //是否可以使用微信支付
				confirmForm:{
					orderid:0,
					details: [
						// {
						// 	id: 0,
						// 	weight: 0,
						// 	price: 0
						// }
					],
					total: 0,
					remarks: ''
				},
			}
		},
		computed: {
			...mapState('brother', {
				goodsDetails: state => state.goodsDetails,
			})
		},
		onLoad(options) {
			this.$store.commit('brother/setGoodsDetails', []);
			this.orderId = options.orderId;
			// 从 Vuex 中读取 details
			this.details = this.goodsDetails;
		},
		methods: {
			handleConfirm(confirmForm) {
				this.confirmForm = confirmForm
				this.startConfimCreate()
				// uni.showModal({
				// 	title: '提示',
				// 	content: '您确定要结算订单吗?',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.$u.post('/User/Order/Recovery',{
				// 				orderid: this.orderId,
				// 				details: confirmForm.details,
				// 				remarks: confirmForm.remarks,
				// 				payWay: false
				// 			}).then((res)=>{
				// 				uni.showToast({
				// 					title: res.msg
				// 				})
				// 				uni.redirectTo({
				// 					url: '/pages/brother/order/success/success?id='+this.orderId
				// 				})
				// 				// uni.redirectTo({
				// 				// 	url: '../../index/index'
				// 				// })
				// 			})
				// 		}
				// 	}
				// })
			},
			handleCancel() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 获取小哥今日微信支付配额余额
			getQuota(){
				return this.$u.get('/Brother/GetQuota').then((res)=>{
					/*
						quota				小哥配额（0为不限）
						amount				小哥已付金额（已用配额）
						balance				小哥剩余配额(空为不限，0为没有钱了，不能微信支付)
						franchiseBalance	加盟商剩余配额(空为不限，0为没有钱了，不能微信支付)
						operatorBalance		运营商账户余额（0为没有钱了，不能微信支付）
					*/
					console.log('查询剩余线上余额',res)
					return res
				})
			},
			// 发起提交
			startConfimCreate(){
				if(this.confirmForm.details.length == 0){
					uni.showToast({
						title: '请先分拣清算',
						icon: 'none'
					});
					this.chooseShow = true
					return
				}
				// this.payTypeShow = true
				this.getQuota().then((res)=>{
					// 判断是否有微信支付配额
					// if(res.operatorBalance > 0 && (res.franchiseBalance > 0 || res.franchiseBalance == null) && (res.balance > 0 || res.balance == null) && (res.quota > 0 || res.quota == 0)){
					// 	// 可使用微信支付
					// 	this.onlinePay = true
					// }else{
					// 	// 不可以使用微信支付
					// 	this.onlinePay = false
					// 	this.payType = true
					// }
					
					if (res.balance == null || res.balance > 0){
						// 可使用微信支付
						this.onlinePay = true
						this.payType = 1
					}else{
						// 不可以使用微信支付
						this.onlinePay = false
						this.payType = 2
					}
					
					this.payTypeShow = true
				})
			},
			// 确认回收
			recovery(payWay = false){
				this.$u.post('/User/Order/Recovery',{
					details: this.confirmForm.details,
					orderid: this.orderId,
					remarks: this.confirmForm.remarks,
					payWay: payWay
				}).then((res)=>{
					uni.showToast({
						title: res.msg
					})
					this.$store.commit('brother/setGoodsDetails', [])
					uni.redirectTo({
						url: '/pages/brother/order/success/success?id='+this.orderId
					})
					// this.$emit('update')
				})
			},
			// 选择支付方式
			choosePayType(type){
				if(type == 1){
					this.payType = type
				}else{
					if(this.onlinePay == false){
						uni.showToast({
							title: '余额不足，请选择现金支付',
							icon: 'none'
						})
						this.payType = 2
					}else{
						this.payType = type
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.circle{
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #666;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		&.on{
			border-color: $u-color-blue;
			background-color: $u-color-blue;
		}
	}
</style>